<template>
  <view class="">
    <view class="page-list">
      <view class="list-child" v-for="(item,index) in dynamicData" :key="index">
        <view class="child-user">
          <image class="user-pic" :src="userData.avatar" mode="aspectFill"></image>
          <view class="user-info">
            <view class="info-name page-line1">
              {{ userData.nickname }}
            </view>
            <view class="info-time">
              {{ item.timeData }}发布
            </view>
          </view>
          <view @click="deleteItem(item)" class="user-del" v-if="isShowDeleteItem">
            <u-icon name="trash" color="#999" size="30"></u-icon>
            <view class="del-text">
              删除
            </view>
          </view>
        </view>
        <view class="child-context">
          {{ item.title }}
        </view>
        <view class="child-imgList">
          <image @click="picView(pIndex,JSON.parse(item.image_list))" class="imgList-one" v-for="(pItem,pIndex) in JSON.parse(item.image_list)" :key="pIndex" mode="aspectFill"
                 :src="pItem"></image>
        </view>
        <view class="child-address" v-if="item.map_content">
          {{ item.map_content }}
        </view>
      </view>
    </view>

    <!-- 删除确认弹窗 -->
    <view v-if="showDeleteModal" class="delete-modal" @click="closeDeleteModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">删除提示</view>
        <view class="modal-message">确定要删除该动态吗？</view>
        <view class="modal-buttons">
          <view class="modal-btn cancel-btn" @click="closeDeleteModal">取消</view>
          <view class="modal-btn confirm-btn" @click="confirmDelete">确定</view>
        </view>
      </view>
    </view>
  </view>

</template>
<script setup lang="ts">
import {ref} from 'vue'
import {delDynamicApi} from "@/api/new";

const props = defineProps({
  isShowDeleteItem: {
    type: Boolean,
    default: () => false
  },
  dynamicData: {
    type: Array,
    default: () => []
  },
  userData: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['deleteItemChange'])

const showDeleteModal = ref(false)
const currentDeleteItem = ref(null)

const deleteItem = (item:any) => {
  currentDeleteItem.value = item
  showDeleteModal.value = true
}

const closeDeleteModal = () => {
  showDeleteModal.value = false
  currentDeleteItem.value = null
}

const confirmDelete = async () => {
  if (currentDeleteItem.value) {
    await delDynamicApi({
      id: currentDeleteItem.value.id
    })
    uni.showToast({
      title: '删除成功',
      icon: 'none'
    })
    emit('deleteItemChange', true)
    closeDeleteModal()
  }
}

const picView = (current:any,urls:any) => {
  uni.previewImage({
    current,
    urls
  })
}
</script>
<style scoped lang="scss">
.page-list {
  .list-child {
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #eeeeee;
    .child-user {
      display: flex;
      align-items: center;
      .user-pic {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .user-info {
        width: 100%;
        font-size: 26rpx;
        color: #999999;
        margin-left: 20rpx;
        .info-name {
          font-size: 36rpx;
          color: #111111;
        }
      }
      .user-del {
        padding: 10rpx 30rpx;
        border-radius: 40rpx;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1rpx solid #DDDDDD;
        flex-shrink: 0;
      }
    }
    .child-context {
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #111111;
    }
    .child-imgList {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 20rpx;
      margin: 20rpx auto;
      .imgList-one {
        width: 100%;
        height: 196rpx;
        border-radius: 20rpx;
      }
    }
    .child-address {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

/* 删除确认弹窗 */
.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  width: 600rpx;
  background: #fff;
  border-radius: 32rpx;
  padding: 60rpx 40rpx 40rpx;
}

.modal-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
}

.modal-message {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  line-height: 48rpx;
  margin-bottom: 80rpx;
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 44rpx;
}

.cancel-btn {
  background: #f5f5f5;
  color: #999;
}

.confirm-btn {
  background: linear-gradient(90deg, #ff8fe5, #ff5acf);
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(255, 90, 207, 0.3);
}
</style>